﻿<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>京沪深租房信息驾驶舱</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/comon0.css">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        const whei = $(window).width();
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            const whei = $(window).width();
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/customed.js"></script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="../js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img src="../picture/loading.gif" alt="页面加载中"> 页面加载中...</div>
</div>
<div class="head">
    <h1>京沪深租房信息驾驶舱</h1>
    <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

    <script>
        let t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            const dt = new Date();
            const y = dt.getFullYear();
            const mt = dt.getMonth() + 1;
            const day = dt.getDate();
            const h = dt.getHours();//获取时
            const m = dt.getMinutes();//获取分
            const s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    </script>

</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">房源价格分布</div>
                <div class="allnav" id="echart1"></div>
                <script type="text/javascript" th:inline="javascript">
                    $(function () {
                        echarts_1();
                        console.log([[${barchartPrice}]])

                        function echarts_1() {
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('echart1'), 'customed');

                            option = {
                                //  backgroundColor: '#00265f',
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '0%',
                                    top: '10px',
                                    right: '0%',
                                    bottom: '4%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'category',
                                    data: ['2000以下', '2000-4000', '4000-6000', '6000-10000', '10000以上'],
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },

                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        // rotate:50,
                                        show: true,
                                        splitNumber: 15,
                                        textStyle: {
                                            color: "#fff",
                                            fontSize: '12',
                                        },
                                    },
                                }],
                                yAxis: [{
                                    type: 'value',
                                    axisLabel: {
                                        //formatter: '{value} %'
                                        show: true,
                                        textStyle: {
                                            color: "#fff",
                                            fontSize: '12',
                                        },
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1	)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                        }
                                    }
                                }],
                                series: [
                                    {
                                        name: '北京',
                                        type: 'bar',
                                        data: [[${barchartPrice}]]["北京"],
                                    },
                                    {
                                        name: '上海',
                                        type: 'bar',
                                        data: [[${barchartPrice}]]["上海"],
                                    },
                                    {
                                        name: '深圳',
                                        type: 'bar',
                                        data: [[${barchartPrice}]]["深圳"],
                                    }
                                ]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                            window.addEventListener("resize", function () {
                                myChart.resize();
                            });
                        }
                    })

                </script>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">房源楼层分布</div>
                <div class="allnav" id="echart2"></div>
                <script type="text/javascript" th:inline="javascript">
                    $(function () {
                        echarts_2();

                        function echarts_2() {
                            var myChart = echarts.init(document.getElementById('echart2'), 'customed');
                            var floorlist = [[${pictogramFloor}]];
                            console.log(floorlist)
                            var data = [{
                                value: floorlist[0],
                                symbolRepeat: true,
                                symbolSize: ['50%', '50%'],
                                itemStyle: {
                                    color: "#5a6fc0"
                                }
                            }, {
                                value: floorlist[1],
                                symbolRepeat: true,
                                symbolSize: ['50%', '50%'],
                                itemStyle: {
                                    color: "#9eca7e"
                                }
                            }, {
                                value: floorlist[2],
                                symbolRepeat: true,
                                symbolSize: ['50%', '50%'],
                                itemStyle: {
                                    color: "#f2ca6b"
                                }
                            },];
                            var option = {
                                tooltip: {},
                                grid: {
                                    top: 20,
                                    left: 50,
                                    bottom: 20,
                                    right: 50
                                },
                                legend: {
                                    data: ['象形柱图']
                                },
                                xAxis: {
                                    data: ['低层', '中层', '高层'],
                                    axisLabel: {
                                        // rotate:50,
                                        show: true,
                                        textStyle: {
                                            color: "#fff",
                                            fontSize: '12',
                                        },
                                    },
                                    //axisLine:{lineStyle:{color:"#46516a"}}
                                },
                                yAxis: {
                                    splitLine: {show: false},
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: "#fff",
                                            fontSize: '12',
                                        },
                                    },
                                    //axisLine:{lineStyle:{color:"#46516a"}}
                                },
                                //animationEasing: 'elasticOut',
                                textStyle: {
                                    fontSize: 20, //坐标轴名称的大小
                                    color: 'white', // 坐标轴名称的颜色
                                },
                                series: [{
                                    type: 'pictorialBar',
                                    symbol: 'path://M988.968421 776.084211c0-2.694737 0-2.694737 0 0 0-2.694737 0-2.694737 0 0V336.842105c0-10.778947-8.084211-18.863158-18.863158-18.863158-26.947368 0-53.894737 10.778947-80.842105 29.642106V199.410526c0-13.473684-8.084211-24.252632-18.863158-29.642105L522.778947 37.726316c-8.084211-2.694737-16.168421-2.694737-24.252631 0L153.6 169.768421c-13.473684 5.389474-18.863158 16.168421-18.863158 29.642105v148.210527c-26.947368-18.863158-53.894737-29.642105-80.842105-29.642106-10.778947 0-18.863158 8.084211-18.863158 18.863158v441.936842s0 2.694737 2.694737 2.694737c0 0 0 2.694737 2.694737 2.694737 2.694737 2.694737 2.694737 2.694737 5.389473 2.694737l458.105263 196.715789h10.778948l458.105263-196.715789c2.694737 0 2.694737-2.694737 5.389474-2.694737 0 0 0-2.694737 2.694737-2.694737l2.694736-2.694737c5.389474 0 5.389474-2.694737 5.389474-2.694736z m-253.305263-51.2v5.389473l-204.8 88.926316v-113.178947l212.88421-80.842106c-8.084211 35.031579-8.084211 70.063158-8.08421 99.705264zM172.463158 234.442105l320.673684 123.957895v307.2L269.473684 582.063158c-24.252632-80.842105-59.284211-150.905263-99.705263-196.71579V234.442105z m115.873684 495.831579v-5.389473c0-29.642105-2.694737-64.673684-8.08421-99.705264l212.88421 80.842106v113.178947l-204.8-88.926316zM754.526316 582.063158l-223.663158 83.536842V358.4l320.673684-123.957895v148.210527c-40.421053 48.505263-75.452632 115.873684-97.010526 199.410526zM512 72.757895l328.757895 126.652631L512 326.063158 183.242105 199.410526 512 72.757895zM137.431579 404.210526c2.694737 0 2.694737 0 0 0 40.421053 43.115789 78.147368 113.178947 102.4 210.189474 10.778947 40.421053 10.778947 78.147368 10.778947 113.178947V751.831579l2.694737 2.694737s0 2.694737 2.694737 2.694737c0 0 2.694737 2.694737 5.389474 2.694736h2.694737l242.526315 105.094737h10.778948l242.526315-105.094737h2.694737c2.694737 0 2.694737-2.694737 5.389474-2.694736 0 0 0-2.694737 2.694737-2.694737l2.694737-2.694737v-2.694737-18.863158c0-35.031579 0-72.757895 10.778947-113.178947 24.252632-97.010526 61.978947-164.378947 99.705263-207.494737l2.694737-2.694737c21.557895-24.252632 45.810526-37.726316 64.673684-43.115789v137.431579l-72.757894 32.336842c-10.778947 5.389474-13.473684 16.168421-10.778948 24.252631 2.694737 8.084211 10.778947 10.778947 16.168421 10.778948 2.694737 0 5.389474 0 8.084211-2.694737l56.589473-24.252632V619.789474l-70.063157 26.947368c-10.778947 5.389474-13.473684 16.168421-10.778948 24.252632 2.694737 8.084211 10.778947 10.778947 16.168421 10.778947 2.694737 0 5.389474 0 8.084211-2.694737l56.589473-24.252631v105.094736l-439.242105 188.631579-439.242105-188.631579v-105.094736l56.589474 24.252631c2.694737 0 5.389474 2.694737 8.08421 2.694737 8.084211 0 13.473684-5.389474 16.168421-10.778947 5.389474-10.778947 0-21.557895-10.778947-24.252632l-72.757895-32.336842V538.947368l56.589474 24.252632c2.694737 0 5.389474 2.694737 8.08421 2.694737 8.084211 0 13.473684-5.389474 16.168421-10.778948 5.389474-10.778947 0-21.557895-10.778947-24.252631l-72.757895-32.336842v-137.431579c29.642105 2.694737 51.2 18.863158 72.757895 43.115789z',
                                    itemStyle: {
                                        color: "#0b1e78"
                                    },
                                    data: data
                                }]
                            };

                            myChart.setOption(option);
                        }

                    })
                </script>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div style="height:100%; width: 100%;">
                    <div class="sy" id="fb1"></div>
                    <script type="text/javascript" th:inline="javascript">
                        $(function pieChart_fb1() {
                            // 基于准备好的dom，初始化echarts实例
                            const pieChart_1 = echarts.init(document.getElementById('fb1'), 'customed');

                            const dataStyle = {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    //shadowBlur: 40,
                                    //shadowColor: 'rgba(40, 40, 40, 1)',
                                }
                            };
                            const placeHolderStyle = {
                                normal: {
                                    color: 'rgba(255,255,255,.05)',
                                    label: {show: false,},
                                    labelLine: {show: false}
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            };
                            let option = {
                                title: [{
                                    text: '房间数',
                                    left: 'center',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '16'
                                    }

                                }],
                                // color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                                tooltip: {
                                    show: true,
                                    formatter: "{a} : {c} "
                                },
                                legend: {
                                    itemWidth: 10,
                                    itemHeight: 10,
                                    itemGap: 12,
                                    bottom: '3%',
                                    data: ['独卧', '双卧', '三卧及以上'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.6)',
                                    }
                                },
                                series: [
                                    {
                                        name: '北京',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['59%', '80%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${BJ_bedroom_1}]], name: '独卧'},
                                            {value: [[${BJ_bedroom_2}]], name: '双卧'},
                                            {
                                                value: [[${BJ_bedroom_3}]], name: '三卧及以上',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '上海',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['39%', '60%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${SH_bedroom_1}]], name: '独卧'},
                                            {value: [[${SH_bedroom_2}]], name: '双卧'},
                                            {
                                                value: [[${SH_bedroom_3}]], name: '三卧及以上',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '深圳',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['20%', '40%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${SZ_bedroom_1}]], name: '独卧'},
                                            {value: [[${SZ_bedroom_2}]], name: '双卧'},
                                            {
                                                value: [[${SZ_bedroom_3}]], name: '三卧及以上',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            pieChart_1.setOption(option);
                            window.addEventListener("resize", function () {
                                pieChart_1.resize();
                            });
                        })
                    </script>
                    <div class="sy" id="fb2"></div>
                    <script type="text/javascript" th:inline="javascript">
                        $(function pieChart_fb2() {
                            // 基于准备好的dom，初始化echarts实例
                            const pieChart_2 = echarts.init(document.getElementById('fb2'), 'customed');

                            const dataStyle = {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    //shadowBlur: 40,
                                    //shadowColor: 'rgba(40, 40, 40, 1)',
                                }
                            };
                            const placeHolderStyle = {
                                normal: {
                                    color: 'rgba(255,255,255,.05)',
                                    label: {show: false,},
                                    labelLine: {show: false}
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            };
                            let option = {
                                title: [{
                                    text: '洗手间个数',
                                    left: 'center',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '16'
                                    }

                                }],
                                // color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                                tooltip: {
                                    show: true,
                                    formatter: "{a} : {c} "
                                },
                                legend: {
                                    itemWidth: 10,
                                    itemHeight: 10,
                                    itemGap: 12,
                                    bottom: '3%',
                                    data: ['无卫', '独卫', '双卫', '三卫+'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.6)',
                                    }
                                },
                                series: [
                                    {
                                        name: '北京',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['59%', '80%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${BJ_bathroom_0}]], name: '无卫'},
                                            {value: [[${BJ_bathroom_1}]], name: '独卫'},
                                            {value: [[${BJ_bathroom_2}]], name: '双卫'},
                                            {
                                                value: [[${BJ_bathroom_3}]], name: '三卫+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '上海',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['39%', '60%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${SH_bathroom_0}]], name: '无卫'},
                                            {value: [[${SH_bathroom_1}]], name: '独卫'},
                                            {value: [[${SH_bathroom_2}]], name: '双卫'},
                                            {
                                                value: [[${SH_bathroom_3}]], name: '三卫+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '深圳',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['20%', '40%'],
                                        itemStyle: dataStyle,
                                        // color: ['#f2ca6b', '#f2ca6b', '#f2ca6b', '#f2ca6b', '#f2ca6b'],
                                        data: [{value: [[${SZ_bathroom_0}]], name: '无卫'},
                                            {value: [[${SZ_bathroom_1}]], name: '独卫'},
                                            {value: [[${SZ_bathroom_2}]], name: '双卫'},
                                            {
                                                value: [[${SZ_bathroom_3}]], name: '三卫+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            pieChart_2.setOption(option);
                            window.addEventListener("resize", function () {
                                pieChart_2.resize();
                            });
                        })
                    </script>
                    <div class="sy" id="fb3"></div>
                    <script type="text/javascript" th:inline="javascript">
                        $(function pieChart_fb3() {
                            // 基于准备好的dom，初始化echarts实例
                            const pieChart_3 = echarts.init(document.getElementById('fb3'), 'customed');

                            const dataStyle = {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    //shadowBlur: 40,
                                    //shadowColor: 'rgba(40, 40, 40, 1)',
                                }
                            };
                            const placeHolderStyle = {
                                normal: {
                                    color: 'rgba(255,255,255,.05)',
                                    label: {show: false,},
                                    labelLine: {show: false}
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            };
                            let option = {
                                title: [{
                                    text: '厅的个数',
                                    left: 'center',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '16'
                                    }

                                }],
                                // color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                                tooltip: {
                                    show: true,
                                    formatter: "{a} : {c} "
                                },
                                legend: {
                                    itemWidth: 10,
                                    itemHeight: 10,
                                    itemGap: 12,
                                    bottom: '3%',
                                    data: ['无厅', '单厅', '双厅', '三厅+'],
                                    textStyle: {
                                        color: 'rgba(255,255,255,.6)',
                                    }
                                },
                                series: [
                                    {
                                        name: '北京',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['59%', '80%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${BJ_hall_0}]], name: '无厅'},
                                            {value: [[${BJ_hall_1}]], name: '单厅'},
                                            {value: [[${BJ_hall_2}]], name: '双厅'},
                                            {
                                                value: [[${BJ_hall_3}]], name: '三厅+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '上海',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['39%', '60%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${SH_hall_0}]], name: '无厅'},
                                            {value: [[${SH_hall_1}]], name: '单厅'},
                                            {value: [[${SH_hall_2}]], name: '双厅'},
                                            {
                                                value: [[${SH_hall_3}]], name: '三厅+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },
                                    {
                                        name: '深圳',
                                        type: 'pie',
                                        clockWise: false,
                                        hoverAnimation: false,
                                        center: ['50%', '42%'],
                                        radius: ['20%', '40%'],
                                        itemStyle: dataStyle,
                                        data: [{value: [[${SZ_hall_0}]], name: '无厅'},
                                            {value: [[${SZ_hall_1}]], name: '单厅'},
                                            {value: [[${SZ_hall_2}]], name: '双厅'},
                                            {
                                                value: [[${SZ_hall_3}]], name: '三厅+',
                                                tooltip: {show: false},
                                                itemStyle: placeHolderStyle
                                            }]
                                    },]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            pieChart_3.setOption(option);
                            window.addEventListener("resize", function () {
                                pieChart_3.resize();
                            });
                        })
                    </script>
                </div>
                <div class="boxfoot">

                </div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left" id="labelTotal">房源总数</li>
                        <li class="pulll_left" id="labelCity">城市</li>
                    </ul>
                </div>
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" id="availabilityTotal">00000</li>
                        <li class="pulll_left counter" id="availabilityCity">0000</li>
                    </ul>
                </div>
                <script type="text/javascript" th:inline="javascript">
                    $(function setAvailability() {
                        console.log("set digital");
                        let availabilityTotal = [[${total}]];
                        let availabilityCity = [[${cityList}]];
                        document.getElementById("availabilityTotal").innerText = availabilityTotal.toString();
                        console.log("availabilityCity", typeof (availabilityCity), availabilityCity);
                        let cityDigital = document.getElementById("availabilityCity");
                        let cityLabel = document.getElementById("labelCity");
                        let i = 0;
                        setInterval(() => {
                            let cityName = "";
                            switch (i) {
                                case 0:
                                    cityName = "北京";
                                    break;
                                case 1:
                                    cityName = "上海";
                                    break;
                                case 2:
                                    cityName = "深圳";
                                    break;
                            }
                            cityDigital.innerText = availabilityCity[i].toString();
                            cityLabel.innerText = cityName;
                            i++;
                            if (i === 3) {
                                i = 0;
                            }
                        }, 3000);
                    })

                    function setCityAvailability() {
                        // let availabilityCity = [[${cityMap}]];
                        // console.log("availabilityCity",typeof(availabilityCity),availabilityCity);
                        // document.getElementById("availabilityCity");
                    }
                </script>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">
                            <input class="check-button" type="button" value="北京"
                                   onclick="showAndHidden1(1)">
                            <input class="check-button" type="button" value="上海"
                                   onclick="showAndHidden1(2)">
                            <input class="check-button" type="button" value="深圳"
                                   onclick="showAndHidden1(3)">
                        </li>
                        <li class="pulll_left">
                            <input class="check-button" type="button" value="租房地区分布旭日图"
                                   onclick="showAndHidden2()">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="../picture/lbx.png" alt="lbx"></div>
                <div class="map2"><img src="../picture/jt.png" alt="jt"></div>
                <div class="map3"><img src="../picture/map.png" alt="map"></div>
                <div class="map4" id="map_1" style="visibility:hidden;position: relative"></div>
                <div class="map5" id="sunburst_1" style="visibility:visible;position: relative">
                    <div class="alltitle">租房地区分布</div>
                    <div class="allnav" id="echart6"></div>
                    <script type="text/javascript" th:inline="javascript">
                        $(function echarts_6() {
                            // 基于准备好的dom，初始化echarts实例
                            const sunburstChart = echarts.init(document.getElementById('echart6'), 'customed');

                            let option = {
                                tooltip: {
                                    show: true,
                                },
                                series: [
                                    {
                                        radius: [20, '76%'],
                                        type: 'sunburst',
                                        itemStyle: {
                                            borderRadius: 7,
                                            borderWidth: 2
                                        },
                                        label: {
                                            position: 'outside',
                                            // distance: 15,
                                            // padding: 3,
                                            // silent: false
                                        },
                                        // labelLine: {//指示线样式设置
                                        //     show: true,
                                        // },
                                        emphasis: {
                                            focus: 'ancestor'
                                        },
                                        levels: [
                                            {},
                                            {
                                                r0: '20%',
                                                r: '40%',
                                                itemStyle: {
                                                    borderWidth: 3
                                                },
                                                label: {
                                                    position: 'inside',
                                                    rotate: 'tangential'
                                                }
                                            },
                                            {
                                                r0: '40%',
                                                r: '80%',
                                                label: {
                                                    position: 'outside',
                                                    padding: 3,
                                                    silent: false
                                                },
                                                itemStyle: {
                                                    borderWidth: 2
                                                }
                                            },
                                        ],
                                        data: [
                                            {
                                                name: "北京",
                                                children: [
                                                    {
                                                        name: "昌平",
                                                        value: [[${BJ_Changping}]],
                                                    },
                                                    {
                                                        name: "朝阳",
                                                        value: [[${BJ_Chaoyang}]],
                                                    },
                                                    {
                                                        name: "大兴",
                                                        value: [[${BJ_Daxing}]],
                                                    },
                                                    {
                                                        name: "东城",
                                                        value: [[${BJ_Dongcheng}]],
                                                    },
                                                    {
                                                        name: "房山",
                                                        value: [[${BJ_Fangshan}]],
                                                    },
                                                    {
                                                        name: "丰台",
                                                        value: [[${BJ_Fengtai}]],
                                                    },
                                                    {
                                                        name: "海淀",
                                                        value: [[${BJ_Haidian}]],
                                                    },
                                                    {
                                                        name: "怀柔",
                                                        value: [[${BJ_Huairou}]],
                                                    },
                                                    {
                                                        name: "门头沟",
                                                        value: [[${BJ_Mentougou}]],
                                                    },
                                                    {
                                                        name: "石景山",
                                                        value: [[${BJ_Shijingshan}]],
                                                    },
                                                    {
                                                        name: "顺义",
                                                        value: [[${BJ_Shunyi}]],
                                                    },
                                                    {
                                                        name: "通州",
                                                        value: [[${BJ_Tongzhou}]],
                                                    },
                                                    {
                                                        name: "西城",
                                                        value: [[${BJ_Xicheng}]],
                                                    }
                                                ]
                                            },
                                            {
                                                name: "上海",
                                                children: [
                                                    {
                                                        name: "宝山",
                                                        value: [[${SH_Baoshan}]],
                                                    },
                                                    {
                                                        name: "奉贤",
                                                        value: [[${SH_Fengxian}]],
                                                    },
                                                    {
                                                        name: "虹口",
                                                        value: [[${SH_Hongkou}]],
                                                    },
                                                    {
                                                        name: "黄埔",
                                                        value: [[${SH_Huangpu}]],
                                                    },
                                                    {
                                                        name: "嘉定",
                                                        value: [[${SH_Jiading}]],
                                                    },
                                                    {
                                                        name: "静安",
                                                        value: [[${SH_Jingan}]],
                                                    },
                                                    {
                                                        name: "闵行",
                                                        value: [[${SH_Minhang}]],
                                                    },
                                                    {
                                                        name: "浦东",
                                                        value: [[${SH_Pudong}]],
                                                    },
                                                    {
                                                        name: "普陀",
                                                        value: [[${SH_Putuo}]],
                                                    },
                                                    {
                                                        name: "徐汇",
                                                        value: [[${SH_Xuhui}]],
                                                    },
                                                    {
                                                        name: "杨浦",
                                                        value: [[${SH_Yangpu}]],
                                                    },
                                                    {
                                                        name: "长宁",
                                                        value: [[${SH_Changning}]],
                                                    }
                                                ]
                                            },
                                            {
                                                name: "深圳",
                                                children: [
                                                    {
                                                        name: "宝安",
                                                        value: [[${SZ_Baoan}]],
                                                    },
                                                    {
                                                        name: "布吉",
                                                        value: [[${SZ_Buji}]],
                                                    },
                                                    {
                                                        name: "福田",
                                                        value: [[${SZ_Futian}]],
                                                    },
                                                    {
                                                        name: "光明",
                                                        value: [[${SZ_Guangming}]],
                                                    },
                                                    {
                                                        name: "龙岗",
                                                        value: [[${SZ_Longgang}]],
                                                    },
                                                    {
                                                        name: "龙华",
                                                        value: [[${SZ_Longhua}]],
                                                    },
                                                    {
                                                        name: "罗湖",
                                                        value: [[${SZ_Luohu}]],
                                                    },
                                                    {
                                                        name: "南山",
                                                        value: [[${SZ_Nanshan}]],
                                                    },
                                                    {
                                                        name: "盐田",
                                                        value: [[${SZ_Yantian}]],
                                                    }
                                                ]
                                            },
                                        ],
                                    }
                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            sunburstChart.setOption(option);
                            window.addEventListener("resize", function () {
                                sunburstChart.resize();
                            });
                            console.log(option.series);
                        })
                    </script>
                    <div class="boxfoot"></div>
                </div>
                <script type="text/javascript" th:inline="javascript">

                </script>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:4.9rem">
                <div class="alltitle">房间家用电器条件</div>
                <div class="allnav" id="echart4"></div>
                <script type="text/javascript" th:inline="javascript">
                    $(function echarts_4() {
                        // 基于准备好的dom，初始化echarts实例
                        const radarChart_1 = echarts.init(document.getElementById('echart4'), 'customed');

                        let option = {
                            legend: {
                                orient: 'vertical',
                                x: 'right',      //可设定图例在左、右、居中
                                y: 'top',     //可设定图例在上、下、居中
                                padding: [0, 30, 0, 20],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                                data: ['北京', '上海', '深圳'],
                                textStyle: {
                                    color: "#CCC"
                                },
                            },
                            tooltip: {
                                show: true, // 是否显示
                            },
                            radar: {
                                // shape: 'circle',
                                radius: 100,
                                indicator: [
                                    {name: '电视', max: 1},
                                    {name: '冰箱', max: 1},
                                    {name: '洗衣机', max: 1},
                                    {name: '空调', max: 1},
                                    {name: '热水器', max: 1},
                                    {name: '宽带', max: 1}
                                ]
                            },
                            series: [
                                {
                                    name: '房间家用电器条件',
                                    type: 'radar',
                                    data: [
                                        {
                                            value: [[${applianceBeijing}]],
                                            name: '北京'
                                        },
                                        {
                                            value: [[${applianceShanghai}]],
                                            name: '上海'
                                        },
                                        {
                                            value: [[${applianceShenzhen}]],
                                            name: '深圳'
                                        }
                                    ]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        radarChart_1.setOption(option);
                        window.addEventListener("resize", function () {
                            radarChart_1.resize();
                        });
                        console.log(option.series);
                    })
                </script>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 4.8rem">
                <div class="alltitle">房间生活条件</div>
                <div class="allnav" id="echart5"></div>
                <script type="text/javascript" th:inline="javascript">
                    $(function echarts_5() {
                        // 基于准备好的dom，初始化echarts实例
                        const radarChart_2 = echarts.init(document.getElementById('echart5'), 'customed');

                        let option = {
                            legend: {
                                orient: 'vertical',
                                x: 'right',      //可设定图例在左、右、居中
                                y: 'top',     //可设定图例在上、下、居中
                                padding: [0, 30, 0, 20],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                                data: ['北京', '上海', '深圳'],
                                textStyle: {
                                    color: "#CCC"
                                },
                            },
                            tooltip: {
                                show: true, // 是否显示
                            },
                            radar: {
                                // shape: 'circle',
                                radius: 100,
                                indicator: [
                                    {name: '阳台', max: 1},
                                    {name: '床', max: 1},
                                    {name: '衣柜', max: 1},
                                    {name: '沙发', max: 1},
                                    {name: '燃气', max: 1},
                                    {name: '暖气', max: 1}
                                ]
                            },
                            series: [
                                {
                                    name: '房间生活条件',
                                    type: 'radar',
                                    data: [
                                        {
                                            value: [[${furnitureBeijing}]],
                                            name: '北京'
                                        },
                                        {
                                            value: [[${furnitureShanghai}]],
                                            name: '上海'
                                        },
                                        {
                                            value: [[${furnitureShenzhen}]],
                                            name: '深圳'
                                        }
                                    ]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        radarChart_2.setOption(option);
                        window.addEventListener("resize", function () {
                            radarChart_2.resize();
                        });
                        console.log(option.series);
                    })
                </script>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>

<script type="text/javascript" src="../js/beijing.js"></script>
<script type="text/javascript" src="../js/shanghai.js"></script>
<script type="text/javascript" src="../js/shenzhen.js"></script>

<script type="text/javascript">
    var datalist;
    var option1, option2, option3;
    var myChart;

    function showAndHidden1(city) {
        const div1 = document.getElementById("map_1");
        const div2 = document.getElementById("sunburst_1");
        div1.style.visibility = "visible";
        div2.style.visibility = "hidden";
        if (city == 1) {
            myChart.setOption(option1);
        } else if (city == 2) {
            myChart.setOption(option2);
        } else {
            myChart.setOption(option3);
        }
    }

    function showAndHidden2() {
        const div1 = document.getElementById("map_1");
        const div2 = document.getElementById("sunburst_1");
        div1.style.visibility = "hidden";
        div2.style.visibility = "visible";
    }

    // $(function () {
    $.ajax({
        url: "http://127.0.0.1:8080/map",
        type: "GET",
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (data, status) {
            console.log(status, data);
            datalist = data;
            map();
        }
    })


    function map() {
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('map_1'), 'customed');
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };


        echarts.registerMap('shanghai', shanghaiJson);     //shanghaiJson名称取自shanghai.js里的var  shanghaiJson变量名
        echarts.registerMap('beijing', BeijingJson);
        echarts.registerMap('shenzhen', shenzhenJson);
        // let jsonCommunity=[[${mapcommunity}]];
        // console.log(jsonCommunity,jsonCommunity.toString(),JSON.parse(jsonCommunity));
        // var mapcommunity = [[${mapcommunity}]];
        // console.log({mapcommunity})
        // var mapChart = echarts.init(document.getElementById('mapChart'));
        option1 = {
            // tooltip: {
            //     trigger:'item',
            //     show:true,
            //     alwaysShowContent: true
            // },
            title: {
                text: '北京',
                x: "center",
                textStyle: {
                    color: '#4c60ff'
                }
            },
            geo: {
                map: 'beijing',
                label: {
                    normal: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    },
                    emphasis: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    }
                },
                roam: false,//禁止其放大缩小
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#4c60ff'
                    }
                }
            },
            series: [{

                type: 'scatter',
                coordinateSystem: 'geo',
                // rippleEffect: {
                //     brushType: 'stroke'
                // },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                symbolSize: function (val, params) {
                    return Math.log(val[2] * 10);
                },
                data: datalist['北京'],
            }]
        };
        option2 = {
            // tooltip: {
            //     trigger:'item',
            // },
            title: {
                text: '上海',
                x: "center",
                textStyle: {
                    color: '#4c60ff'
                }
            },
            geo: {
                map: 'shanghai',
                label: {
                    normal: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    },
                    emphasis: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    }
                },
                roam: false,//禁止其放大缩小
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#4c60ff'
                    }
                }
            },
            series: [{

                type: 'scatter',
                coordinateSystem: 'geo',
                // rippleEffect: {
                //     brushType: 'stroke'
                // },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                symbolSize: function (val, params) {
                    return Math.log(val[2] * 10);
                },
                data: datalist['上海'],
            }]
        };
        option3 = {
            // tooltip: {
            //     trigger:'item',
            //     show:true,
            //     alwaysShowContent: true
            // },
            title: {
                text: '深圳',
                x: "center",
                textStyle: {
                    color: '#4c60ff'
                }
            },
            geo: {
                map: 'shenzhen',
                label: {
                    normal: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    },
                    emphasis: {
                        show: true,
                        textStyle: {color: "#f2ca6b"}
                    }
                },
                roam: false,//禁止其放大缩小
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#4c60ff'
                    }
                }
            },
            series: [{

                type: 'scatter',
                coordinateSystem: 'geo',
                // rippleEffect: {
                //     brushType: 'stroke'
                // },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                symbolSize: function (val, params) {
                    return Math.log(val[2] * 10);
                },
                data: datalist['深圳'],
            }]
        };
        // mapChart.setOption(option);


        myChart.setOption(option1);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    // })


</script>
</body>
</html>
